import React, { useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom';
import './DetailTutor.css';
import detailData from '../../assets/data/detailData';
import TutorPageData from './TutorData';
import close from '../../assets/img/close.png';


function DetailTutor(props = {}) {
  const { data = [] } = props
  let navigate = useNavigate();
  const { search = '' } = useLocation()

  const searchId = search.split('=')[1]
  const { detailList, color, barMargin, bgColor } = detailData().DetailTutor;
  const qaList = TutorPageData().qa;
  const [ qaData, setQaData ] = useState([...qaList])
  const [ total, setTotal ] = useState(0)
  function pathSwitch(path = `/`) {
    navigate(path)
  }

  function onSelectItem(i, v) {
    let qaDataCopy = [...qaData]
    qaDataCopy.forEach((e, index) => {
      if(index === i) {
        e.value = v
      }
    })
    setQaData([...qaDataCopy])
    let totalResult = 0
    qaDataCopy.forEach((e, index) => {
      if(e.value) {
        totalResult = totalResult + e.value
      }
    })
    setTotal(totalResult)
  }


  return (
    <div className="page-detail-info" style={{ backgroundColor: bgColor }}>
      <div style={{ marginTop: '40px', zIndex: 3, position: 'relative' }}>
        <div className='cloud cloud-l page-cloud-l'></div>
        <div className='cloud cloud-m page-cloud-m page-cloud-m-relation '></div>
        <div className='cloud cloud-r page-cloud-r page-cloud-r-relation'></div>
        <img alt='' className="left-ban" style={{ position: 'fixed', top: '260px', width: '200px' }} src={'https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/tutor.png'}></img>
        <div style={{ display: 'flex', width: '50%', margin: 'auto' }}>
          <div style={{ margin: '200px 20px 0', wordBreak: 'break-all' }}>
            <div className='page-item'>
              <a name={'0'}></a>
              <h2 className='page-item-title' style={{ color: color }}>{detailList[0].title}</h2>
              <img alt='' className='page-item-banner' src={'https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/d_banner1.png'}></img>
              <p className='page-item-info'>經營關係一段時間，或許你會開始和另一半商討生育下一代的想法。到底我們在生孩子前，需要考量哪些因素呢？</p>
              <div className="page-item-five-box page-item-five-box-tutor">
                <div className="page-item-five-item">
                  <p className='page-item-info'>
                    <div className="page-item-sub">1. 首先建議夫妻雙方盡量都選擇在最佳的生育年齡裏</div>
                  </p>
                  <p className='page-item-info'>在30-32歲前生育，父母雙方的精力以及身體狀況都會相對比較好些，這樣對於生育寶寶的硬件條件就沒有擔憂，而且這個時期身體的免疫力各方面也比較好，如果結婚已經超過最佳生育年紀了，那麽考慮要孩子的情況下建議夫妻雙方先去做個孕前檢查。</p>
                </div>
                <div className="page-item-five-item">
                  <p className='page-item-info'>
                    <div className="page-item-sub">2. 在夫妻雙方經濟穩定的情況下，考慮生孩子</div>
                  </p>
                  <p className='page-item-info'>一旦要生孩子，生孩子的成本，以及帶孩子的問題等，物質條件是否具備孕育寶寶所需的各項費用，有許多寶媽寶爸在決定要孩子的那一刻可能需要把這些盤算清楚。如果是考慮自己帶孩子，那麽一方可能需要失業在家帶孩子，這些都是生育孩子需要考慮的條件，畢竟經濟基礎決定一切，如果在雙方還未穩定的情況下，考慮要孩子可能需要根據實際情況。</p>
                </div>
                <div className="page-item-five-item">
                  <p className='page-item-info'>
                    <div className="page-item-sub">3. 是否做好了成為爸爸媽媽的心理準備</div>
                  </p>
                  <p className='page-item-info'>女性如果還未準備成為媽媽的情況下，一旦突然有了孩子，媽媽在孕期的整個狀態或者在產後的整個狀態都沒辦法適應和應對的情況下，那麽產後抑郁的可能性就會比較高。另外，男性如果心態上仍未準備好當爸爸，例如：需要減少和朋友相聚的時間、在懷孕期間要支援太太身心的變化、要負責家務等等，可能會適應不良，或與太太增加了爭執。以下有幾個方面的心理準備需要多思考和商量：</p>
                  <p className='page-item-info'>
                    <p><span style={{ color: color }}>• 作息：</span>
                      你現在喜歡、習以為常的生活，可以接受被改變到什麼程度？</p>
                    <p><span style={{ color: color }}>• 為何想生育：</span>
                      真誠問自己，這是自己想要還是迫於其他人的壓力？</p>
                    <p><span style={{ color: color }}>• 現實取捨：</span>
                      孩子是一輩子的責任，一旦小孩出生後，原本喜歡的娛樂或想達到的目標某種程度需放下或放棄。</p>
                    <p><span style={{ color: color }}>• 與伴侶的關係：</span>
                      兩人的溝通機制與默契，是否能應付小孩出生後的情況？</p>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className='page-item-info'>
                    <div className="page-item-sub">4. 生育後是否有人幫忙照顧孩子</div>
                  </p>
                  <p className='page-item-info'>懷孕期是每個媽媽需要認真對待的一段過程，在媽媽成功誕下寶寶後，不斷出現的問題又要夫婦一起面對。誰可以幫忙照顧媽媽和寶寶？會不會找工人姐姐幫忙？如果家中長輩有時間，會不會提早商量照顧分工？有計劃地生育，讓兩方都感到有所準備，亦就不同的分工商討，找到兩人都能接受的方案，更能順利過渡。</p>
                </div>
                <div className="page-item-five-item">
                  <p className='page-item-info'>
                    <div className="page-item-sub">5、物質條件是否具備孕育孩子所需的各項費用</div>
                  </p>
                  <p className='page-item-info'>有許多夫婦在決定要生孩子的一刻，都會在心里默默想著給孩子最好的生活條件，物質條件是否充裕是很多夫妻要考慮的因素。當太太在家待產時需要一筆開銷，孩子出生後的奶粉錢、購買新傢俬或者需要搬到大一點的新家以迎接新成員等等。在考慮生孩子的時候，商量這些問題都是有需要的。</p>
                </div>
              </div>
              <p className='page-item-info'>不論是對人生規劃的影響、對自我表現的擔心、對伴侶的期待，或與原生家庭的關係，想要擁有一個孩子，我們需要考慮的事情很多。如果需要付出那麼多，為什麼我還是想生一個孩子？這之中可能包含了我們對於一個新身份的期待，以及更深層的，我們意識到這能讓我們體驗擁有一個家的感覺。</p><p className='page-item-info'>
                如果可以思考這些因素，和另一半事事商量，在生育計劃就能更有準備。</p>

            </div>
            <div className='page-item'>
              <a name={'1'}></a>
              <h2 className='page-item-title' style={{ color: color }}>{detailList[1].title}</h2>
              <img alt='' className='page-item-banner' src={'https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/d_banner2.png'}></img>
              <p className='page-item-info'> 很多夫妻在面對不育的問題，都會很大壓力。其中要經歷的有：</p>

              <div className="tutor-pop">
                <div className="tutor-pop-item">女士在治療過程中，身體上因為打排卵針、或取卵手術的痛楚和不適</div>
                <div className="tutor-pop-item">男士也可能遇上家庭傳承的期待、長輩的要求等等壓力</div>
                <div className="tutor-pop-item">兩夫妻亦可能因為不育而面對財政、夫妻關係或影響工作表現的壓力</div>
                <div className="tutor-pop-item">在確認失敗時，不育夫妻都會尋找原因，陷入究責的焦慮循環</div>
                <div className="tutor-pop-item">最難受的是，在面對重重難關後，人工受孕或試管嬰兒也不一定會成功</div>
                <div className="tutor-pop-item">在這個循環之中，傷害關係，甚至傷害自己</div>
              </div>


              <p class="page-item-info"><div class="page-item-sub">生活的影響：</div></p>
              <p className='page-item-info'> 在求孕的過程中，我們可能要認真運動、不煙不酒或攝取咖啡因，或要服用大量維他命或其他補品。有些女性為了測量體溫和尿液排卵測試而每天要早起，有些夫婦為了檢查和治療的時間而不去旅行，有些人則因為療程的時間而要常常請假等等。把所有的時間都花在研究求孕的方法而忽略生活其他地方。生活型態的改變亦可能影響當事人的社交生活。他們可能再也不跟朋友去喝酒，或可能臨時取消約好的社交活動。這些新的生活常態都需要大量適應的，亦可能造成個人或關係的壓力。</p>
              <p class="page-item-info"><div class="page-item-sub">婚姻與性生活的影響：</div></p>
              <p className='page-item-info'> 很多不育夫妻，婚姻品質和性生活都會在不育治療中變差。如果只有一方被診斷出不育，患者可能會自責，或擔心另一半會失望，如另一半有意或無意地責怪患者，或沒有支持患者，就會因而影響關係。有些夫妻或許難以坦誠分享彼此的感受，進而誤會另一半不愛惜自己，從而變得有距離。</p>
              <p className='page-item-info'>另外，以懷孕為目的性生活，會讓性變成例行工事，不再有趣和親密。不育會考驗夫妻的關係強度和對彼此的支持，亦可能會嚴重影響彼此的感情和性生活。</p>


              <p class="page-item-info"><div class="page-item-sub">人際關係的影響：</div></p>
              <p className='page-item-info'>有些人會逃避朋友的懷孕慶祝派對，或逃避看有孩子的人的社交媒體，因為看到別人有小孩，自己卻無法懷孕，他們會覺得忌妒或難過。甚至會在過時過節時不出席家庭聚會，以免被問起生育進程時感到有壓力。</p>


              <p class="page-item-info"><div class="page-item-sub">經濟影響：</div></p>
              <p className='page-item-info'>香港公立醫院收費較私家診所或醫院便宜，可以輪侯時間較長，部分夫婦可能因年紀因素需選擇到私家診所或醫院，甚至到外國接受治療，這些選項都十分昂貴，可能令家庭的財政出現壓力。</p>


              <p class="page-item-info"><div class="page-item-sub">心理壓力：</div></p>
              <p className='page-item-info'>包含面對傳承的焦慮、生命的不完美、認為自己的人生是失敗、質疑另一半的價值…等，我們可能在這些想法底下產生許多焦慮情緒。研究指出，最辛苦的是放胚胎後等待結果的十四天。這是不孕夫妻難以言說的焦慮，發生在排卵或植入之後，什麼都不能做的十四天。一直會擔心自己做了會影響胚胎的事，又或常常想去驗孕，糾結成功與否，忽視生命裡其他如工作、父母，伴侶等等。而當結果不如所願，就要面對在不育治療中，努力了都失敗的無力，當中的挫敗感會令人抑鬱沮喪。</p>
              <p className='page-item-info'>另外，因為夫妻壓力處理方式與步調不同，也有不同的溝通方式。例如：當女性面對不育治療又很在意結果時，伴侶未必能夠立即回應，或多以解決問題而非回應感受的方法回應，這讓女性感到不被了解，男性亦感到無力。這些不同在不育治療中會擴大，會讓我們在關係裡感到孤單。</p>
              <p className='page-item-info'>想了自己的情緒現狀？請進行以下測驗：</p>
              <p className='page-item-sub'>在過去兩個星期，你有多經常受以下問題困擾？</p>
              <div className='tutor-list'>
                <div className="tutor-list-title">
                  <div className='tutor-list-left tutor-list-left-title'><div className='tutor-list-num'></div>題目</div>
                  <div className='tutor-list-right'>
                    <span> 完全沒有</span>
                    <span> 幾天</span>
                    <span> 一半以上的日子</span>
                    <span>近乎每天</span>
                  </div>

                </div>
                {
                  qaData.map((e, i) => {
                    const { title } = e;
                    return <div className="tutor-list-item">
                      <div className='tutor-list-left'><div className='tutor-list-num'>{i + 1}</div>{title}</div>
                      <div className='tutor-list-right'>
                        <span className={ e.value === 0 ? 'tutor-list-right-span-selected' : '' } onClick={() => onSelectItem(i, 0)}>0</span>
                        <span className={ e.value === 1 ? 'tutor-list-right-span-selected' : '' } onClick={() => onSelectItem(i, 1)}>1</span>
                        <span className={ e.value === 2 ? 'tutor-list-right-span-selected' : '' } onClick={() => onSelectItem(i, 2)}>2</span>
                        <span className={ e.value === 3 ? 'tutor-list-right-span-selected' : '' } onClick={() => onSelectItem(i, 3)}>3</span>
                      </div>

                    </div>
                  })
                }
              </div>
              <div class="relation-total-score">
                <div>總計：</div>
                <div class="relation-total-item">= { total.toString().padStart(2, 0) }</div>
              </div>
              <p className='page-item-info'>評分說明：</p>

              <p className='page-item-info'>
                <p>10-14分：<span style={{fontWeight:'700',color:'#000'}}>輕度憂鬱</span></p>
                <p>15-19分：<span style={{fontWeight:'700',color:'#000'}}>中度憂鬱</span></p>
                <p>20 分以上：<span style={{fontWeight:'700',color:'#000'}}>重度憂鬱</span></p>
              </p>
            </div>
            <div className='page-item'>
              <a name={'2'}></a>
              <h2 className='page-item-title' style={{ color: color }}>{detailList[2].title}</h2>
              <img alt='' className='page-item-banner' src={'https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/d_banner3.png'}></img>
              <p className='page-item-info'>輔助生殖治療是一段身心疲憊的旅程。接受治療的人士和夫婦會面臨一系列的挑戰，包括焦慮、壓力、憤怒、抑鬱、內疚、沮喪和失落等。我們的服務專為輔助生殖治療人士及夫婦而設，以提供全面的支援和協助尋找解決問題的方案，及應付在過程中的複雜的情緒起伏。</p>
              <p className='page-item-info'>這項服務是香港大學 - 瑪麗醫院輔助生育中心及香港大學社會工作及社會行政學系的合作成果。自2001年成立以來，我們一直堅定不移地提供心理輔導服務。我們的顧問擁有豐富的經驗，致力為接受輔助生育治療的人士和夫婦在治療過程中提供指導和支援。</p>
              <p className='page-item-info'>我們提倡全人關顧，為促進及加強接受輔助生育治療的人士的心理及情緒健康。我們相信情緒健康與身體健康有著緊密的聯繫。因此，我們的服務立志涵蓋這兩個重要的部分。</p>
              <p className='page-item-info'>心理輔導服務是完全獨立於臨床決策的過程。我們確保諮詢期間分享的任何信息嚴格保密，旨在為您創造了一個安全而不被評判的環境，讓您可以坦誠地表達自己的想法和感受。</p>
              <div style={{ borderBottom: `2px dashed ${color} `, margin: '40px 0' }}></div>
              <p className='page-item-info'>
                <div className="page-item-three-title" style={{ color: color }}>輔導服務</div>
              </p>
              <p className='page-item-info'>由持有香港社會工作者註冊管理局認可的註冊社工將提供全面的輔導服務。這些服務包括綜合社會心理評估、心理諮詢和婚姻治療。</p>
              <p class="page-item-info"><div class="page-item-sub">綜合社會心理評估</div></p>

              <p className='page-item-info'>配子捐贈，如利用捐贈的卵子和精子，是一種有效的方法，旨在幫助因缺乏可用的卵子或精子而面臨不孕挑戰的夫婦受孕。根據人類生殖科技管理局的《生殖技術和胚胎研究實務守則》（2013年），對於尋求治療的夫婦以外的人的捐贈配子或胚胎的程序，諮詢服務應由不參與治療或臨床決策過程的獨立人員提供。輔導員將向相關之各方提供輔助生殖的綜合社會心理評估，以確保進行全面評估：</p>
              <p className='page-item-info'>•<span style={{ color: color }}>接受配子或胚胎捐贈的夫婦：</span>正在考慮接受捐贈的配子或胚胎的個人或夫婦將接受綜合社會心理評估。該評估旨在了解他們踏上這一重要的生殖之旅時的情緒準備情況、期望和需求。</p>
              <p className='page-item-info'>• <span style={{ color: color }}>配子或胚胎捐贈者及其配偶：</span>考慮捐贈配子或胚胎的個人或夫婦也會接受綜合社會心理評估。這種評估確保他們了解自己的決定的含義，並幫助他們疏理當中的感受。</p>
              <p className='page-item-info'>評估過程中，輔導員將對所有相關人士進行諮詢，並根據這些諮詢寫出全面的綜合社會心理評估報告。該報告作為寶貴的資訊，確保所有相關人士都能得到適當的支持和指導，與他們同建有責任感且情感健康的育兒之路。</p>
              <p className='page-item-info'>*此服務為收費服務。請與我們聯繫以獲取更多資訊。<br></br>**需要轉介信。</p>
              <div style={{ borderBottom: `2px dashed ${color} `, margin: '40px 0' }}></div>
              <p className='page-item-info'>
                <div className="page-item-three-title" style={{ color: color }}>心理健康教育</div>
              </p>
              <p class="page-item-info"><div class="page-item-sub">心理健康教育小組治療</div></p>
              <p className='page-item-info'>該計劃專為正在接受試管嬰兒療程的女性而設計。旨在通過一系列身心自助技巧減輕他們因治療而產生的焦慮並增強他們的滿足感。</p>
              <p class="page-item-info"><div class="page-item-sub">在線講座</div></p>
              <p className='page-item-info'>這些在線講座提供了有關試管嬰兒療程程序、情緒上需要的準備、治療選擇、壓力管理和夫妻溝通的資訊。希望參加者透過關於不同的決策的知識，了解可用的支持資源。在線教育講座旨在幫助接受試管嬰兒療程之人士及夫婦能夠自信地經歷他們的旅程。</p>
              <p class="page-item-info"><div class="page-item-sub">心理諮詢服務</div></p>
              <p className='page-item-info'>我們合資格的專業人員致力採用有實證研究支持及以人為本的方法來解決服務對象的獨特需求和挑戰。我們致力於遵守專業標準，確保您在整個旅程中得到有質素的支持。</p>
              <p class="page-item-info"><div class="page-item-sub">決擇諮詢</div></p>
              <p className='page-item-info'>其目的是使服務對象：<br></br>
                • 了解不同行動對他們自己、家庭以及由此出生的任何孩子的影響<br></br>
                • 做出有關生育治療的決擇，探索使用捐贈配子或胚胎的意義或決定捐獻自己的卵子、精子或胚胎時的意義<br></br>
                • 確定生育治療的決定<br></br>
                • 決定如何處理剩餘胚胎</p>
              <div style={{ borderBottom: `2px dashed ${color} `, margin: '40px 0' }}></div>
              <p className='page-item-info'>
                <div className="page-item-three-title" style={{ color: color }}>輔導服務收費</div>
              </p>
              <div className="tutor-collect">
                <div className="tutor-collect-left">
                  <p className='page-item-info'>現時正接受由以下醫院提供的資助或私家輔助生育治療</p>
                  <p className='page-item-info'>• 香港大學瑪麗醫院 (HKU-QMH CARE)<br></br>
                    • 廣華醫院4A輔助生殖中心<br></br>
                    • 東區尤德夫人那打素醫院 (PYNEH) 之生育評估門診<br></br>
                    • 瑪嘉烈醫院 (PMH)婦產科</p>
                  <p className='page-item-info'>*需要上述生殖中心之一的轉介信</p>

                </div>
                <div className="tutor-collect-right">
                  <p className='page-item-info'>優惠價
                    （詳細收費請聯絡本服務查詢）</p>
                </div>
              </div>
              <div className="tutor-collect">
                <div className="tutor-collect-left">
                  <p className='page-item-info'>來自其他診所和醫院的人士或夫婦<br></br>
                    *接受個人申請，若有醫生轉介信，請一併提供</p>

                </div>
                <div className="tutor-collect-right">
                  <p className='page-item-info'>詳細收費請聯絡本服務查詢</p>
                </div>
              </div>




              <p className='page-item-info'>
                <div className="page-item-sub">須知：</div>
                <p>• 醫院或診所轉介的客戶必須出示醫生的轉介信。自薦人士必須在初次諮詢期間填寫登記表。</p>
                <p>• 諮詢地點位於香港大學百週年校園賽馬會大樓，交通詳情將在諮詢前提供。</p>
                <p>• 所有服務使用者都會在接受諮詢前簽署同意書。</p>
                <p>• 所有案件記錄將僅用於諮詢目的。除香港大學社會工作及社會行政學系外，所收集的資料不會透露給任何第三方。這些記錄將根據《私隱資料條例》儲存。</p>
                <p>• 如有必要，我們會轉介給其他合資格之專業人士，例如精神科醫生或性治療師。</p>
              </p>
              <p className='page-item-info'>
                <div className="page-item-sub" >查詢和預約</div>
                電郵：ivfcoun@hku.hk <br></br>
                網站：<a href="https://hkuivf.hku.hk/services/psychosocial-counseling/" target="_blank">https://hkuivf.hku.hk/services/psychosocial-counseling/</a>
              </p>



            </div>
          </div>
        </div>
      </div>
      <div className="page-bar">
        {
          detailList.map((e, i) => {
            const { titleBar, title, id } = e
            return <div style={{ display: 'flex', margin: barMargin, color: color, cursor: 'pointer' }}>
              <div style={{ minWidth: '10px', background: color, borderRadius: '5px', margin: '0 10px' }}></div>
              {/* <div dangerouslySetInnerHTML={{ __html: titleBar }}></div> */}
              <a dangerouslySetInnerHTML={{ __html: titleBar }} href={'#' + i} style={{ color, textDecoration: 'none' }}></a>
            </div>
          })
        }
      </div>
      <div className='page-detail-foot'>
        <div className='gradual gradual-tutor'></div>
        <div className='detail-foot'></div>
        <div className='detail-floor'></div>
      </div>
      <div className='detail-wave'>
        <div className='bg-wave bg-wave-l bg-wave-about-l'></div>
        <div className='bg-wave bg-wave-our  bg-wave-about'></div>
      </div>
      <img className='page-close cursor-pointer' alt='' src={close} onClick={() => pathSwitch()} />
    </div>
  )
}

export default DetailTutor